<template>
  <div class="drug-viewing-container">
    <!-- 查询表单 -->
    <el-form  :inline="true" class="query-form">
      <div class="form-row">
        <el-form-item label="药品名称">
          <el-input v-model="queryForm.drugName" placeholder="请输入药品名称" style="width: 180px;" clearable></el-input>
          <el-button type="primary" @click="handleQuery" style="margin-left: 10px">查询</el-button>
        </el-form-item>
        <el-form-item label="药品类型">
          <el-select v-model="queryForm.drugType" placeholder="请选择药品类型" style="width: 180px;" clearable>
            <el-option label="西药" value="西药"/>
            <el-option label="中药" value="中药"/>
          </el-select>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="queryForm.inventory" placeholder="请输入库存" style="width: 180px;" clearable></el-input>
        </el-form-item>
      </div>
      <div class="form-row">
        <el-form-item label="剂型">
          <el-select v-model="queryForm.dosageForm" placeholder="请选择剂型" style="width: 180px;" clearable>
            <el-option label="片剂" value="片剂"/>
            <el-option label="胶囊" value="胶囊"/>
            <el-option label="颗粒" value="颗粒"/>
            <el-option label="注射剂" value="注射剂"/>
            <el-option label="冲剂" value="冲剂"/>
            <el-option label="口服液" value="口服液"/>   
          </el-select>
        </el-form-item>
        <el-form-item label="费用名称">
          <el-select v-model="queryForm.drugMoneyName" placeholder="请选择费用名称" style="width: 180px;" clearable>
            <el-option label="西药费" value="西药费"/>
            <el-option label="中药费" value="中药费"/>
          </el-select>
        </el-form-item>
        <el-form-item label="库存上限">
          <el-input v-model="queryForm.inventoryupperlimit" placeholder="请输入库存上限" style="width: 180px;" clearable></el-input>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="生产日期">
          <el-date-picker v-model="queryForm.startTime" type="date" placeholder="请选择生产日期" style="width: 180px;" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="规格">
          <el-select v-model="queryForm.specification" placeholder="请选择规格" style="width: 180px;" clearable>
            <el-option label="盒" value="盒"/>
            <el-option label="瓶" value="瓶"/>
            <el-option label="袋" value="袋"/>
            <el-option label="支" value="支"/>
            <el-option label="片" value="片"/>
          </el-select>
        </el-form-item>
        <el-form-item label="库存下限">
          <el-input v-model="queryForm.inventorylowerlimit" placeholder="请输入库存下限" style="width: 180px;" clearable></el-input>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="有效日期">
          <el-date-picker v-model="queryForm.effectiveTime" type="date" placeholder="请选择有效日期" style="width: 180px;" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="进价">
          <el-input v-model="queryForm.purchasePrice" placeholder="请输入进价" style="width: 180px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="queryForm.sellingPrice" placeholder="请输入售价" style="width: 180px;" clearable></el-input>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="功效" class="efficacy-item">
          <el-input
            v-model="queryForm.efficacy"
            type="textarea"
            :rows="4"
            placeholder="请输入功效"
            style="width: 600px;"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>

    <!-- 操作按钮 -->
    <div class="operation-buttons">
      <el-button type="primary" @click="handleClear">清空全部</el-button>
      <el-button type="success" @click="handleQuery">显示全部</el-button>
      <el-button type="warning" @click="handleUpdate">药品修改</el-button>
      <el-button type="danger" @click="handleAdd">药品入库</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%" v-loading="loading" @row-click="handleRowClick">
      <el-table-column prop="drugName" label="药品名称" width="150"></el-table-column>
      <el-table-column prop="drugType" label="药品类型" width="100"></el-table-column>
      <el-table-column prop="drugMoneyName" label="费用名称" width="120"></el-table-column>
      <el-table-column prop="dosageForm" label="剂型" width="100"></el-table-column>
      <el-table-column prop="specification" label="规格" width="100"></el-table-column>
      <el-table-column prop="purchasePrice" label="进价" width="100"></el-table-column>
      <el-table-column prop="sellingPrice" label="售价" width="100"></el-table-column>
      <el-table-column prop="inventory" label="库存" width="100"></el-table-column>
      <el-table-column prop="inventoryupperlimit" label="库存上限" width="100"></el-table-column>
      <el-table-column prop="inventorylowerlimit" label="库存下限" width="100"></el-table-column>
      <el-table-column prop="startTime" label="生产日期" width="120">
        <template #default="scope">
          {{ scope.row.startTime.split(' ')[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="effectiveTime" label="有效日期" width="120">
        <template #default="scope">
          {{ scope.row.effectiveTime.split(' ')[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="efficacy" label="功效" width="120"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
import { reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)

const queryForm = reactive({
  id: 0,
  drugName: '',
  dosageForm: '',
  drugType: '',
  drugMoneyName: '',
  specification: '',
  purchasePrice: '',
  sellingPrice: '',
  inventory: '',
  inventoryupperlimit: '',
  inventorylowerlimit: '',
  efficacy: '',
  startTime: '',
  effectiveTime: '',
})

const tableData = ref([])

// 清空全部方法
const handleClear = () => {
  Object.keys(queryForm).forEach(key => {
    queryForm[key] = key === 'id' ? 0 : ''
  })
  tableData.value = []
  ElMessage.success('已清空所有数据')
}

const handleQuery = async () => {
  try {
    loading.value = true
    const res = await proxy.http.get(`api/ADrugViewing/QueryDrugViewing?drugName=${queryForm.drugName}`)
    tableData.value = res.data
  } catch (error) {
    ElMessage.error('查询失败：' + error.message)
  } finally {
    loading.value = false
  }
}

const handleUpdate = async () => {
  if (!queryForm.id) {
    ElMessage.error('请先在表格中选择要修改的药品');
    return;
  }
  try {
    const res = await proxy.http.post('api/ADrugViewing/UpdDrugViewing', queryForm);
    if (res === "1" || res === 1) {
      ElMessage.success('药品修改成功');
      handleQuery();
    } else {
      ElMessage.error('药品修改失败，原因：' + res);
    }
  } catch (error) {
    ElMessage.error('药品修改异常：' + (error.message || '未知错误'));
  }
};

const handleAdd = async () => {
  try {
    const res = await proxy.http.post('api/ADrugViewing/AddDrugViewing', queryForm);
    console.log('完整响应：', res);
    if (res === "1" || res === 1) {
      ElMessage.success('药品入库成功');
      handleQuery();
    } else {
      ElMessage.error('药品入库失败，原因：' + res);
    }
  } catch (error) {
    ElMessage.error('药品入库异常：' + (error.message || '未知错误'));
  }
};

const handleRowClick = (row) => {
  Object.keys(queryForm).forEach(key => {
    queryForm[key] = row[key] ?? '';
  });
};

onMounted(() => {
  handleQuery()
})
</script>

<style scoped>
.drug-viewing-container {
  padding: 20px;
  background-color: #fff;
}

.query-form {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.form-row:last-child {
  margin-bottom: 0;
}

.el-form-item {
  margin-right: 20px;
  margin-bottom: 15px;
}

.operation-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.efficacy-item {
  width: 100%;
}

.el-table {
  margin-top: 20px;
  border-radius: 4px;
}
</style>
